<!--
  * 时间：2025/1/2
  * 作者：刘岩
  * 描述：热度图
-->
<template>
  <div class="heat-pic">
    <div
      class="point-box"
      v-for="(item, index) in json"
      :key="index"
      :style="{'top': fontSizeVw(item.top), left: fontSizeVw(item.left), width: fontSizeVw(item.width), height: item.height, background: item.color}"
    ></div>
  </div>
</template>

<script>
import { listEquipment } from "@/api/deviceManage";
import { fontSize } from '@/utils/echartsSize';
export default {
  name: 'heatPic',
  props: {
    // 展厅code
    code: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      pic: '',
      // pointList: [], // 监控点数据
      json: [
        {
          name: '',
          top: 0,
          left: 0,
          width: 925,
          height: '300px',
          value: 80,
          color: '#f05757',
          imgUrl: require('@/assets/large/plan-1.jpg')
        }
      ]
    }
  },
  watch: {
    code (val) {
      console.log('33');
      // this.point();
    }
  },
  methods: {
    /**
     * 时间：2025/1/7
     * 作者：刘岩
     * 功能：
     */
    fontSizeVw(val) {
      return fontSize(val) + 'px';
    },
    /**
     * 时间：2025/1/2
     * 作者：刘岩
     * 功能：根据code（展厅）获取对应的监控点信息
     */
    point() {
      listEquipment({
        includeSubNode: '1', // 是否包含下级，1包含，0不包含（若regionId为空，则该参数不起作用）
        pageNo: 1,
        pageSize: 999,
        regionId: this.code
      }).then(res => {
        let data = JSON.parse(res.msg);
        // this.pointList = data.data.list;
        console.log(data.data.list)
        // 处理拼接监控点code
        let pointCode = [];
        data.data.list.forEach(item => {
          pointCode.push(item.indexCode);
        });
        console.log(pointCode.join(','));
      });
    }
  }
}
</script>

<style scoped lang="scss">
.heat-pic {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("../../../assets/large/plan-1.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .point-box {
    position: absolute;
    opacity: 0.7;
    //background-image: radial-gradient(circle at center, transparent 50%, #f00 50%);
  }
}
</style>
